{{extend './common/layout.html'}}

{{block 'main'}}
    <!-- 头部 -->
    {{include './common/header.html'}}
    <!-- /头部 -->
    <!-- 主体内容 -->
    <div class="content">
       {{include './common/aside.html'}}
        <!-- 侧边栏 -->
        <div class="main">
            <!-- 分类标题 -->
            <div class="title">
                <h4>5b9a716cb2d2bf17706bcc0a</h4>
            </div>
            <!-- /分类标题 -->
            <form class="form-container" action="/admin/article-add" method="POST" enctype="multipart/form-data">
                <div class="form-group">
                    <label>标题</label>
                    <input type="text" name="title" class="form-control" placeholder="请输入文章标题">
                </div>
                <div class="form-group">
                    <label>作者</label>
                    <input type="text" name="author" value="{{@userInfo._id}}" class="form-control" readonly>
                </div>
                <div class="form-group" name="publishDate">
                    <label>发布时间</label>
                    <input type="date" class="form-control">
                </div>

                <div class="form-group">
                    <label for="exampleInputFile">文章封面</label>
                    <input type="file" name="cover" id="file">
                    <div class="thumbnail-waper">
                        <img class="img-thumbnail" src="" id="preview">
                    </div>
                </div>
                <div class="form-group">
                    <label>内容</label>
                    <textarea name="content" class="form-control" id="editor"></textarea>
                </div>
                <div class="form-group">
                    <label>访问量</label>
                    <input type ="number"  name="count" class="form-control" id="count" value=0 readonly>
                </div>
                

                <div class="buttons">
                    <input type="submit" class="btn btn-primary">
                </div>
            </form>

        </div>
    </div>
    <!-- /主体内容 -->
   
    {{/block}}

{{block 'script'}}
    <script src="/admin/lib/ckeditor5/ckeditor.js"></script>
    <script type="text/javascript">
        let editor;
        ClassicEditor
            .create(document.querySelector('#editor'))
            .then(newEditor => {
                editor = newEditor;
            })
            .catch(error => {
                console.error(error);
            });

        // 获取数据
        // const editorData = editor.getData();
        
        // 选择文件上传
        var file = document.querySelector('#file')
        var preview = document.querySelector('#preview')
        //当用户选择文件读取文件以后
        file.onchange = function(){
            //创建文件读取对象
            console.log(this)
            var reader = new FileReader();
            //文件选择的文件列表
            // console.log(this)  this 是input
            // console.log(this.fields)
            // console.log(this.files[0])
            // console.log("111111111111111111111")
            // console.log(this)
          
            // console.log(this)

            //读取文件
            reader.readAsDataURL(this.files[0])
  
            reader.onload = function(){
                // console.log(reader.result)
                preview.src = reader.result;
            }
        }
    </script>
    {{/block}}
